<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Chatting</title>

  <!-- 字体 -->
  <link
    href="css/fonts-loli-opensans.css"
    rel="stylesheet"
  />


  <!-- 图标 -->
  <link
    rel="stylesheet"
    href="css/all.min.css"
  />

  <!-- 样式 -->
  <link rel="stylesheet" href="chatroom.css"/>
</head>
<body>
  <!-- 粒子背景 -->
  <div id="tsparticles" class="background"></div>

  <div class="chat-container">
    <!-- 顶部栏 -->
    <header class="chat-header">
      <button id="back-btn" class="icon-btn"><i class="fa-solid fa-arrow-left"></i></button>
      <h2> <span id="chatWithNickname">好友</span> </h2>
      <button id="settings-btn" class="icon-btn"><i class="fa-solid fa-gear"></i></button>
    </header>

    <!-- 聊天记录 -->
    <ul id="chatList" class="chat-list"></ul>

    <!-- 输入区 -->
    <div class="chat-input-area">
      <div class="input-group">
        <button id="emoji-btn" class="btn btn-light">
          <i class="far fa-smile"></i>
        </button>
        <div id="emoji-picker" class="emoji-picker" style="display: none;"></div>
        <input
          type="text"
          id="messageInput"
          class="form-control"
          placeholder="输入消息..."
          autocomplete="off"
        />
        <button id="send-btn" class="btn btn-primary">
          <i class="fa-solid fa-paper-plane"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- 设置模态框 -->
  <div id="settingsModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3><i class="fas fa-user-circle"></i> 好友信息</h3>
        <button class="close-btn"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="friend-profile">
          <div class="avatar-section">
            <img id="friendAvatar" class="friend-avatar" src="" alt="头像">
            <h4 id="friendNickname" class="friend-nickname"></h4>
          </div>
          
          <div class="friend-info">
            <div class="info-card">
              <div class="info-item">
                <i class="fas fa-fingerprint"></i>
                <div class="info-content">
                  <label>用户 ID</label>
                  <span id="friendUserId"></span>
                </div>
              </div>
              
              <div class="info-item">
                <i class="fas fa-envelope"></i>
                <div class="info-content">
                  <label>邮箱</label>
                  <span id="friendEmail"></span>
                </div>
              </div>
              
              <div class="info-item">
                <i class="fas fa-venus-mars"></i>
                <div class="info-content">
                  <label>性别</label>
                  <span id="friendGender"></span>
                </div>
              </div>
            </div>

            <div class="bio-card">
              <div class="bio-header">
                <i class="fas fa-comment-dots"></i>
                <label>个人简介</label>
              </div>
              <p id="friendBio" class="bio-content"></p>
            </div>

            <div class="remark-card">
              <div class="remark-header">
                <i class="fas fa-edit"></i>
                <label>好友备注</label>
              </div>
              <div class="remark-input-group">
                <input 
                  type="text" 
                  id="remarkInput" 
                  maxlength="6" 
                  placeholder="设置备注(最多6字)"
                >
                <button id="saveRemark" class="btn-save">
                  <i class="fas fa-check"></i>
                  保存
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 核心库，使用 defer 保证按顺序执行 -->
  <script src="/socket.io/socket.io.js" defer></script>
  <script src="js/axios.min.js" defer></script>
  <script src="js/tsparticles.bundle.min.js" defer></script>
  <script src="js/anime.min.js" defer></script>

  <!-- 业务脚本 -->
  <script src="chatroom.js" defer></script>
</body>
</html>
